<template>
    <section class="side-user">
        <div class="inner" >
            <div class="title">
                个人信息
                <img class="expert" src="./img/hfdr.png" alt="dr">
            </div>
            <div class="body">
                <div class="header clearfix">
                    <div class="avater">
                        <img src="../../../assets/meirong1.jpg" alt="">
                    </div>
                    <p class="user-name">{{userlist.nickname}}</p>
                </div>
                <div class="details">
                    <p style="margin-bottom: 10px">兴趣爱好：户外旅游，音乐舞蹈，表演唱歌，交友谈心，汽车驾驶</p>
                    <p>简介：{{userlist.brief}}</p>
                </div>
                <div class="connect-info">
                    <p>地址：{{userlist.place}}</p>
                    <p>电话：4008988668</p>
                    <p>手机：{{userlist.mobile}}( 同微信号 )</p>
                </div>
            </div>
            <div class="option" v-if="type === 1">
                <span class="option-btn" @click="goEdit">编辑</span>
            </div>
            <div class="option" v-if="type === 2">
                <span class="option-btn half">加关注</span>
                <span class="option-btn half">发私信</span>
            </div>
        </div>
    </section>
</template>

<script>
export default {
  name: 'SideUser',
  props: ['type'],
   data () {
      return {
          userlist:[]
      }
   },
    created () {
      this.init()
    },

    methods: {
        init () {
            let  _this = this
            _this.$post('/api/user/getAllUserInfo',
                {
                    token:_this.$token,
                },function (res) {
                    _this.userlist = res.data
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        goEdit () {
            this.$router.push({path: '/my/setting'})
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../../style/style.less";
  .side-user {
      background-color: #fff;
      border: 1px solid @border-color;
      padding: 0 20px 20px;
      .title {
          height: 55px;
          line-height: 55px;
          font-size: 16px;
          position: relative;
          padding-left: 10px;
          &:before {
              content: '';
              width: 3px;
              height: 22px;
              background-color: @theme-color-dark;
              position: absolute;
              top: 17px;
              left: 0;
          }
          .expert {
              position: absolute;
              right: 0;
              top: 16px;
          }
      }
      .header {
          margin-bottom: 20px;
          .avater {
              width: 44px;
              height: 44px;
              float: left;
              overflow: hidden;
              border-radius: 50%;
              img {
                  width: 100%;
                  height: 100%;
              }
          }
          .user-name {
              float: left;
              height: 44px;
              line-height: 44px;
              color: #333;
              font-size: 16px;
              font-weight: bold;
              margin-left: 10px;
          }
      }
      .details, .connect-info {
          margin-bottom: 20px;
          p {
              font-size: 14px;
              color: #333;
          }
      }
      .option {
          .option-btn {
              display: inline-block;
              width: 100%;
              text-align: center;
              height: 32px;
              line-height: 32px;
              font-size: 16px;
              border-radius: 4px;
              background-color: @theme-color-dark;
              border-bottom: 2px solid #f4162d;
              color: #fff;
              cursor: pointer;
          }
          .half {
              width: 47%;
            &:first-child {
                margin-right: 10px;
            }
          }
      }
  }
</style>
